<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>   
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<%	
		pageContext.setAttribute("APP_PATH", request.getContextPath());
	%>
	<script type="text/javascript" src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script>
  	<link type="text/css" rel="stylesheet" media="all" href="${APP_PATH }/styles/global.css" />
  	<link type="text/css" rel="stylesheet" media="all" href="${APP_PATH }/styles/global_color.css" />
<title>Insert title here</title>


</head>
<body>
        <!-- 包含导航区域 -->
        <jsp:include page="navi.jsp"></jsp:include>
        <!--导航区域结束-->
        <!--主要区域开始-->
        <div id="main" class="main" style="display:">
            <form action="" method="">
                <!--查询-->
                <div class="search_add">
                    <input type="button" value="增加" class="btn_add" id="btn_add"  />
                </div>  
                <!--删除的操作提示-->
                <div id="operate_result_info" class="operate_success">
                    <img src="../images/close.png" onclick="this.parentNode.style.display='none';" />
                    删除成功！
                </div> <!--删除错误！该角色被使用，不能删除。-->
                <!--数据区域：用表格展示数据-->     
                <div id="data">                      
                    <table id="datalist">
                        <tbody id="tb">
                        <tr>
                            <th>角色 ID</th>
                            <th>角色名称</th>
                            <th class="width600">拥有的权限</th>
                            <th class="td_modi"></th>
                      
                        </tr> 
                        <c:forEach items="${listroleInfo}" var="lrInfo">
                        	<tr>
                        	<td>${lrInfo.roleId}</td>
                        	<td>${lrInfo.roleName}</td>
                        	<td>${lrInfo.rpri} </td>
                        	 <td>
                                <input type="button" value="修改" id="${lrInfo.roleId}"  class="btn_modify" onclick="getContextnode(this)"/>
                                <input type="button" value="删除" id="${lrInfo.roleId}" class="btn_delete" onclick="deleteRole();" />
                            </td>
                        	</tr>
                        </c:forEach>                     
                        </tbody>
                    </table>
                </div> 
                <!--分页-->
                <div id="pages">
        	        <a href="#">上一页</a>
                    <a href="#" class="current_page">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                    <a href="#">4</a>
                    <a href="#">5</a>
                    <a href="#">下一页</a>
                </div>
            </form>
        </div>
        <!--添加区域-->
        <div id="add" class="main" style="display: none">            
            <!--保存操作后的提示信息：成功或者失败-->
            <div id="save_result_info" class="save_success">保存成功！</div><!--保存失败，角色名称重复！-->
            <form action="" method="" class="main_form">
                <div class="text_info clearfix"><span>角色名称：</span></div>
                <div class="input_info">
                    <input type="text" id="role_name" class="width200" value=""/>
                    <span class="required">*</span>
                    <div class="validate_msg_medium">不能为空，且为20长度的字母、数字和汉字的组合</div>
                </div>                    
                <div class="text_info clearfix"><span>设置权限：</span></div>
                <div class="input_info_high">
                    <div class="input_info_scroll">
                        <ul>
                            <li><input type="checkbox" value="1"/>管理员管理</li>
                            <li><input type="checkbox" value="2" />角色管理</li>
                            <li><input type="checkbox" value="3"/>资费管理</li>
                            <li><input type="checkbox" value="4"/>账务账号</li>
                            <li><input type="checkbox" value="5"/>业务账号</li>
                            <li><input type="checkbox" value="6"/>账单</li>
                            <li><input type="checkbox" value="7"/>报表</li>
                        </ul>
                    </div>
                    <span class="required">*</span>
                    <div class="validate_msg_tiny">至少选择一个权限</div>
                </div>
                <div class="button_info clearfix">
                    <input type="button" value="保存" class="btn_save" onclick="showResult();" />
                    <input type="button" value="取消" class="btn_save" />
                </div>
            </form>
        </div>
</body>
<script type="text/javascript">
	function getContextnode(but){		
		//通过this指向当前的属性获取id中值
		var id = but.getAttribute("id");
		//将updaterid传递给RoleUpdateSer
		location.href="${APP_PATH }/roleUpdate?updaterid=" + id ;
	}
	
</script>
<!-- <script type="text/javascript">
    function name(){

    }
    //文档加载事件，获取所有角色信息
    $(function () {
        $.get('${APP_PATH}/RoleServlet',{"method":"getAll"},function (result) {
            $.each(result,function (index,item) {
                var id = $('<td></td>').append(item.roleId);
                var name = $('<td></td>').append(item.roleName);
                var pName = "";
                $.each(item.list,function (dex,ps) {
                    pName += ps.powerName+"、";
                });
                pName =  pName.substring(0,pName.length-1);
                var power = $('<td></td>').append(pName);
                var butset = $('<input type="button" value="修改"  class="btn_modify" />');
                butset.attr('editid',item.roleId);
                var butdel = $('<input type="button" value="删除"  class="btn_delete" />');
                butdel.attr('delid',item.roleId);
                var but = $('<td></td>').append(butset).append(butdel);
                var tr = $('<tr></tr>').append(id).append(name).append(power).append(but);
                $('#tb').append(tr);
            });
        },'json');
    });

    //修改角色信息
    $(document).on('click','.btn_modify',function () {
        $('.btn_modify').parent().children()
        $('#main').css("display","none");
        $('#add').css("display","");
        $.get('${APP_PATH}/RoleServlet',{"id":"1","method":"edit"},function (result) {
            $('#role_name').val(result[0].roleName);
            $.each(result[0].list,function (index,item) {
                $('input:checkbox[value='+item.powerName+']').attr("checked",'true');
            });
        },'json');
    });

    //保存修改
    $('#').click(function () {
        $.post('${APP_PATH}/RoleServlet',{},function (result) {
            if(result == 'success'){
                alert("修改成功");
            } else{
                alert("修改失败");
            }
            $('#main').css("display","");
            $('#add').css("display","none");
        });
    })

	$('#btn_add').click(function(){
		$('#main').css("display","none");
		$('#add').css("display","");
	});
</script> -->
</html>